import 'package:flutter/material.dart';

class StaggerAnimation extends StatelessWidget{

  

  StaggerAnimation({Key key,this.controller}):super(key: key){

    height=Tween<double>(
      begin: 0,
      end: 300.0
    ).animate(
      CurvedAnimation(
        parent:controller,
        curve:Interval(
          0.0,0.6,//间隔，前60%的动画时间
          curve:Curves.ease

        )
      )
    );

    color=ColorTween(
      begin: Colors.green,
      end: Colors.red
    ).animate(
      CurvedAnimation(
        parent:controller,
        curve:Interval(
          0.0,0.6,
          curve: Curves.ease
        )
      )
    );


    padding=Tween<EdgeInsets>(
      begin: EdgeInsets.only(left:0),
      end: EdgeInsets.only(left:100.0)
    ).animate(
      CurvedAnimation(
        parent:controller,
        curve:Interval(
          0.0,0.6,
          curve: Curves.ease
        )
      )
    );

    


    


  }
final Animation<double> controller;
//定义了3个动画，分别是对Container的height、color、padding属性设置的动画，然后通过Interval来为每个动画指定
//整个动画过程中的起始点和终点
    Animation<double> height;
    Animation<EdgeInsets> padding;
    Animation<Color> color;



    Widget _buildAnimation(BuildContext context,Widget child){
      return Container(

        alignment: Alignment.bottomCenter,
        padding: padding.value,
        child: Container(
          color:color.value,
          width:50.0,
          height:height.value
        ),
      );
    }

    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return AnimatedBuilder(
      builder:_buildAnimation,
      animation:controller
    );
  }

}


class StaggerRoute extends StatefulWidget{

@override
_StaggerRouteState createState()=>new _StaggerRouteState();

}

class _StaggerRouteState extends State<StaggerRoute> with TickerProviderStateMixin{

  AnimationController _controller;

@override
  void initState() {
    // TODO: implement initState
    super.initState();

    _controller=AnimationController(
      duration:const Duration(milliseconds: 2000),
      vsync: this
    );


  }


  Future<Null> _playAnimation() async{
    try{
      await _controller.forward().orCancel;

      await _controller.reverse().orCancel;
    } on TickerCanceled{
      //动画被取消
    }
  } 

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    
    return GestureDetector(
behavior:HitTestBehavior.opaque,
onTap:(){
  _playAnimation();
},
child:Center(
  child:Container(
    width:300.0,
    height:300.0,
    decoration:BoxDecoration(
      color:Colors.black.withOpacity(0.1),
      border:Border.all(
        color:Colors.black.withOpacity(0.5)
      )
    ),
    child: StaggerAnimation(
      controller: _controller,
    ),

  )
)
    );
  }
}

